<template>
  <div class="chongmingming">

    <div style="margin:0 20px; padding: 10px; background: rgb(216, 229, 241); color: rgb(23, 43, 76); font-size: 14px; line-height: 25px;">
      二级来源主要指抖音快手的直播间，默认直播发展的订单，会在原订单来源增加后缀—XXXXXXXXX（一串数字），为了更好的辨认这个订单来自哪里个直播间，您可以给直播间ID重新命名，便于自己识别，另外该功能还被用于直播统计数据报表统计等。
    </div>
    <div style="margin: 20px;">
      <el-button type="primary" round @click="logshow">新增命名规则</el-button>
    </div>
    <div style="padding:0 20px;">
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop='author_id' label="二级来源名称"></el-table-column>
        <el-table-column prop='nick_name' label="重命名"></el-table-column>
        <el-table-column prop='source' label="来源"></el-table-column>
        <el-table-column prop='source_name' label="所属店铺"></el-table-column>
        <el-table-column prop='team_name' label="所属战队" v-if="dianpuid == 304676 || dianpuid == 50481"></el-table-column>
        <el-table-column prop='created_at' label="添加时间"> </el-table-column>
        <el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <el-button type="text" @click="bianji(scope.row)">编辑</el-button>
            <el-button type="text" @click="shanchu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增命名规则" center="" :visible.sync="log" width="440px">
      <div style="display: flex;align-items: center;margin-bottom: 20px;">
        <div style="width: 120px;text-align: right;margin-right: 20px;">
          来源
        </div>
        <div>
          <el-select clearable v-model="all.source" style="width: 200px;" filterable placeholder="选择销售渠道">
            <el-option label="快手" value="ks"></el-option>
            <el-option label="抖音" value="douyin"></el-option>
            <el-option label="小红书" value="xiaohongshu"></el-option>
          </el-select>
        </div>
      </div>

      <div style="display: flex;align-items: center;margin-bottom: 20px;">
        <div style="width: 120px;text-align: right;margin-right: 20px;">
          所属店铺
        </div>
        <div>
          <el-select clearable v-model="all.source_id" style="width: 200px;" filterable placeholder="选择">
            <el-option :label="item.source_name" :value="item.id" v-for="(item,index) in sources" :key="item.id"></el-option>
          </el-select>
        </div>
      </div>

      <div style="display: flex;align-items: center;margin-bottom: 20px;">
        <div style="width: 120px;text-align: right;margin-right: 20px;" v-if="all.source != 'xiaohongshu'">
          直播间ID
        </div>
        <div style="width: 120px;text-align: right;margin-right: 20px;" v-if="all.source == 'xiaohongshu'">
          投放ID
        </div>
        <div>
          <el-input v-model="all.author_id" style="width: 200px;"></el-input>
        </div>
      </div>

      <div style="display: flex;align-items: center;margin-bottom: 20px;">
        <div style="width: 120px;text-align: right;margin-right: 20px;">
          重命名为
        </div>
        <div>
          <el-input v-model="all.nick_name" style="width: 200px;" @input="jiankong"></el-input>
        </div>
      </div>
      <div style="display: flex;align-items: center;" v-if="dianpuid == 304676">
        <div style="width: 120px;text-align: right;margin-right: 20px;">
          所属战队
        </div>
        <div>
          <el-select v-model="all.team_id" clearable placeholder="请选择所属战队">
              <el-option label="贾杨战队" :value="1"></el-option>
              <el-option label="邵尉战队" :value="2"></el-option>
              <el-option label="JJS战队" :value="3"></el-option>
          </el-select>
        </div>
      </div>


      <span slot="footer" class="dialog-footer">
        <el-button type="info" round @click="log = false">取消</el-button>
        <el-button type="primary" round @click="queding">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'chongmingming',
    data() {
      return {
        list: "",
        log: false,
        all: {
          author_id: "",
          nick_name: "",
          id: "",
          source:"",
          source_id:""
        },
        sources:"",
        dianpuid:""

      }
    },
    created() {
      this.getlist()
      this.dianpuid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      axios.get('/api/form/channel/sources')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.sources = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

    },
    methods: {
      jiankong:function() {
        if(this.all.nick_name.length >= 20){
          this.$message.error('最多20个字');
          console.log(this.all.nick_name.slice(0,20))
          this.all.nick_name = this.all.nick_name.slice(0,20)
        }

      },
      getlist: function() {
        axios.get('/api/plan-market/sub-source/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

      },
      queding: function() {
        axios.post('/api/plan-market/sub-source/set', this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
              this.$message.success("添加成功");
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      logshow: function() {
        this.all = {
          author_id: "",
          nick_name: "",
          id: "",
          source:"",
          source_id:""
        }
        this.log = true
      },
      bianji: function(item) {
        this.all = {
          source:item.source,
          author_id: item.author_id,
          nick_name: item.nick_name,
          id: item.id,
          source_id:item.source_id,
          team_id:item.team_id
        }
        this.log = true
      },
      shanchu: function(item) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/sub-source/delete', {
              id: item.id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('已删除！');
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .chongmingming {

    /deep/ .el-button--primary {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
  }
</style>
